<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";

// 导入图片资源
import card1 from "@/assets/card/1.png";
import card2 from "@/assets/card/2.png";
import card3 from "@/assets/card/3.jpg";

const router = useRouter();

// 轮播图类型
const carouselType = ref("card");

// 自定义轮播图相关
const currentSlide = ref(0);
const autoplayInterval = ref(null);

// 轮播图数据
const carouselItems = ref([
  {
    id: 1,
    image: card1,
    title: "算法基础",
    description: "掌握基本算法思想，提升编程能力",
    bgColor: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
    icon: "el-icon-data-analysis",
    iconColor: "#fff",
    path: "/c-oj/home/question/category/algorithms",
  },
  {
    id: 2,
    image: card2,
    title: "数据结构",
    description: "理解常用数据结构，优化代码效率",
    bgColor: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
    icon: "el-icon-s-grid",
    iconColor: "#fff",
    path: "/c-oj/home/question/category/data-structures",
  },
  {
    id: 3,
    image: card3,
    title: "动态规划",
    description: "学习动态规划思想，解决复杂问题",
    bgColor: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
    icon: "el-icon-cpu",
    iconColor: "#fff",
    path: "/c-oj/home/question/category/dynamic-programming",
  },
]);

// 题目分类数据
const categories = ref([
  {
    id: 1,
    name: "数组与字符串",
    icon: "el-icon-s-order",
    color: "#409EFF",
    count: 128,
    path: "/c-oj/home/question/category/array-string",
  },
  {
    id: 2,
    name: "链表",
    icon: "el-icon-connection",
    color: "#67C23A",
    count: 86,
    path: "/c-oj/home/question/category/linked-list",
  },
  {
    id: 3,
    name: "树与图",
    icon: "el-icon-share",
    color: "#E6A23C",
    count: 152,
    path: "/c-oj/home/question/category/tree-graph",
  },
  {
    id: 4,
    name: "动态规划",
    icon: "el-icon-cpu",
    color: "#F56C6C",
    count: 94,
    path: "/c-oj/home/question/category/dynamic-programming",
  },
  {
    id: 5,
    name: "排序与搜索",
    icon: "el-icon-s-data",
    color: "#909399",
    count: 73,
    path: "/c-oj/home/question/category/sort-search",
  },
  {
    id: 6,
    name: "数学问题",
    icon: "el-icon-s-opportunity",
    color: "#606266",
    count: 112,
    path: "/c-oj/home/question/category/math",
  },
]);

// 热门题目数据
const popularQuestions = ref([
  {
    id: 1,
    title: "两数之和",
    category: "数组",
    difficulty: "简单",
    passRate: 48.2,
    submitCount: 3521,
  },
  {
    id: 2,
    title: "无重复字符的最长子串",
    category: "字符串",
    difficulty: "中等",
    passRate: 32.7,
    submitCount: 2847,
  },
  {
    id: 3,
    title: "最长回文子串",
    category: "字符串",
    difficulty: "中等",
    passRate: 28.5,
    submitCount: 1936,
  },
  {
    id: 4,
    title: "二叉树的中序遍历",
    category: "树",
    difficulty: "简单",
    passRate: 62.3,
    submitCount: 1542,
  },
  {
    id: 5,
    title: "二叉树的最大深度",
    category: "树",
    difficulty: "简单",
    passRate: 68.9,
    submitCount: 1287,
  },
]);

// 处理轮播图类型切换
const handleCarouselTypeChange = (type) => {
  // 清除自动播放定时器
  if (autoplayInterval.value) {
    clearInterval(autoplayInterval.value);
    autoplayInterval.value = null;
  }

  // 重置当前幻灯片
  currentSlide.value = 0;

  // 如果切换到自定义轮播图，启动自动播放
  if (type === "custom") {
    startAutoplay();
  }
};

// 自定义轮播图控制方法
const nextSlide = () => {
  if (currentSlide.value < carouselItems.value.length - 1) {
    currentSlide.value++;
  }
};

const prevSlide = () => {
  if (currentSlide.value > 0) {
    currentSlide.value--;
  }
};

const goToSlide = (index) => {
  currentSlide.value = index;
};

const startAutoplay = () => {
  autoplayInterval.value = setInterval(() => {
    if (currentSlide.value < carouselItems.value.length - 1) {
      currentSlide.value++;
    } else {
      currentSlide.value = 0;
    }
  }, 4000);
};

// 处理轮播图项点击
const handleItemClick = (item) => {
  router.push(item.path);
};

// 处理分类点击
const handleCategoryClick = (category) => {
  router.push(category.path);
};

// 处理题目点击
const handleQuestionClick = (row) => {
  router.push(`/c-oj/home/question/detail/${row.id}`);
};

// 组件挂载时启动自动播放
onMounted(() => {
  if (carouselType.value === "custom") {
    startAutoplay();
  }
});

// 组件卸载前清除定时器
onBeforeUnmount(() => {
  if (autoplayInterval.value) {
    clearInterval(autoplayInterval.value);
  }
});
</script>
<template>
  <div class="question-page">
    <div class="question-container">
      <!-- <h1 class="question-title">刷题</h1> -->
      <div class="question-content">
        <!-- 轮播图类型选择器 -->
        <div class="carousel-type-selector">
          <el-radio-group
            v-model="carouselType"
            @change="handleCarouselTypeChange"
          >
            <!-- <el-radio-button label="card">卡片式</el-radio-button> -->
            <!-- <el-radio-button label="standard">标准式</el-radio-button> -->
            <!-- <el-radio-button label="fade">淡入淡出</el-radio-button>
            <el-radio-button label="custom">自定义滑动</el-radio-button> -->
          </el-radio-group>
        </div>

        <!-- 卡片式轮播图 -->
        <el-carousel
          v-if="carouselType === 'card'"
          :interval="4000"
          type="card"
          height="400px"
          :autoplay="true"
        >
          <el-carousel-item v-for="item in carouselItems" :key="item.id">
            <div
              class="carousel-item-content"
              :style="{ backgroundImage: `url(${item.image})` }"
            >
              <div class="carousel-item-overlay">
                <div class="carousel-item-info">
                  <h3>{{ item.title }}</h3>
                  <p>{{ item.description }}</p>
                  <el-button type="primary" @click="handleItemClick(item)"
                    >开始练习</el-button
                  >
                </div>
                <div class="carousel-item-icon">
                  <i :class="item.icon" :style="{ color: item.iconColor }"></i>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>

        <!-- 标准式轮播图 -->
        <el-carousel
          v-if="carouselType === 'standard'"
          :interval="4000"
          height="400px"
          :autoplay="true"
          indicator-position="outside"
          arrow="always"
        >
          <el-carousel-item v-for="item in carouselItems" :key="item.id">
            <div
              class="carousel-item-content standard"
              :style="{ backgroundImage: `url(${item.image})` }"
            >
              <div class="carousel-item-overlay">
                <div class="carousel-item-info">
                  <h3>{{ item.title }}</h3>
                  <p>{{ item.description }}</p>
                  <el-button type="primary" @click="handleItemClick(item)"
                    >开始练习</el-button
                  >
                </div>
                <div class="carousel-item-icon">
                  <i :class="item.icon" :style="{ color: item.iconColor }"></i>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>

        <!-- 淡入淡出轮播图 -->
        <el-carousel
          v-if="carouselType === 'fade'"
          :interval="4000"
          height="400px"
          :autoplay="true"
          indicator-position="none"
          arrow="never"
          trigger="click"
        >
          <el-carousel-item v-for="item in carouselItems" :key="item.id">
            <div
              class="carousel-item-content fade"
              :style="{ backgroundImage: `url(${item.image})` }"
            >
              <div class="carousel-item-overlay">
                <div class="carousel-item-info">
                  <h3>{{ item.title }}</h3>
                  <p>{{ item.description }}</p>
                  <el-button type="primary" @click="handleItemClick(item)"
                    >开始练习</el-button
                  >
                </div>
                <div class="carousel-item-icon">
                  <i :class="item.icon" :style="{ color: item.iconColor }"></i>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>

        <!-- 自定义滑动轮播图 -->
        <div v-if="carouselType === 'custom'" class="custom-carousel-container">
          <div class="custom-carousel">
            <div
              class="custom-carousel-track"
              :style="{ transform: `translateX(-${currentSlide * 100}%)` }"
            >
              <div
                v-for="(item, index) in carouselItems"
                :key="item.id"
                class="custom-carousel-slide"
                :class="{ active: index === currentSlide }"
              >
                <div
                  class="carousel-item-content custom"
                  :style="{ backgroundImage: `url(${item.image})` }"
                >
                  <div class="carousel-item-overlay">
                    <div class="carousel-item-info">
                      <h3>{{ item.title }}</h3>
                      <p>{{ item.description }}</p>
                      <el-button type="primary" @click="handleItemClick(item)"
                        >开始练习</el-button
                      >
                    </div>
                    <div class="carousel-item-icon">
                      <i
                        :class="item.icon"
                        :style="{ color: item.iconColor }"
                      ></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="custom-carousel-controls">
            <button
              class="custom-carousel-prev"
              @click="prevSlide"
              :disabled="currentSlide === 0"
            >
              <i class="el-icon-arrow-left"></i>
            </button>
            <div class="custom-carousel-dots">
              <span
                v-for="(item, index) in carouselItems"
                :key="index"
                class="dot"
                :class="{ active: index === currentSlide }"
                @click="goToSlide(index)"
              ></span>
            </div>
            <button
              class="custom-carousel-next"
              @click="nextSlide"
              :disabled="currentSlide === carouselItems.length - 1"
            >
              <i class="el-icon-arrow-right"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- 题目分类区域 -->
      <div class="question-categories">
        <h2 class="section-title">题目分类</h2>
        <div class="category-grid">
          <div
            v-for="category in categories"
            :key="category.id"
            class="category-item"
            @click="handleCategoryClick(category)"
          >
            <div
              class="category-icon"
              :style="{ backgroundColor: category.color }"
            >
              <i :class="category.icon"></i>
            </div>
            <div class="category-info">
              <h3>{{ category.name }}</h3>
              <p>{{ category.count }} 道题目</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 热门题目区域 -->
      <div class="popular-questions">
        <h2 class="section-title">热门题目</h2>
        <el-table
          :data="popularQuestions"
          style="width: 100%"
          @row-click="handleQuestionClick"
        >
          <el-table-column prop="title" label="题目名称" min-width="300">
            <template #default="scope">
              <div class="question-title-cell">
                <span>{{ scope.row.title }}</span>
                <el-tag
                  v-if="scope.row.difficulty === '简单'"
                  type="success"
                  size="small"
                  >简单</el-tag
                >
                <el-tag
                  v-else-if="scope.row.difficulty === '中等'"
                  type="warning"
                  size="small"
                  >中等</el-tag
                >
                <el-tag
                  v-else-if="scope.row.difficulty === '困难'"
                  type="danger"
                  size="small"
                  >困难</el-tag
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="category" label="分类" width="120" />
          <el-table-column prop="passRate" label="通过率" width="100">
            <template #default="scope"> {{ scope.row.passRate }}% </template>
          </el-table-column>
          <el-table-column prop="submitCount" label="提交数" width="100" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.question-page {
  width: 100%;
  padding: 0px 20px 20px 20px; // 添加顶部80px的内边距，为固定导航栏预留空间
  background-color: #f5f7f9;
  min-height: calc(100vh - 60px);
  margin-top: -60px;
}

.question-container {
  max-width: 1520px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .question-title {
    font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
      Arial, PingFang SC-Light, Microsoft YaHei;
    font-size: 28px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eaeaea;
  }

  .question-content {
    margin-bottom: 40px;

    // 轮播图类型选择器样式
    .carousel-type-selector {
      margin-bottom: 20px;
      text-align: center;

      .el-radio-group {
        .el-radio-button {
          &:first-child .el-radio-button__inner {
            border-left: 1px solid #dcdfe6;
          }
        }
      }
    }

    // 通用轮播图项内容样式
    .carousel-item-content {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px;
      color: #fff;
      border-radius: 12px;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      position: relative;

      &.standard {
        border-radius: 12px;
      }

      &.fade {
        border-radius: 12px;
        animation: fadeIn 1s ease-in-out;
      }

      &.custom {
        border-radius: 12px;
        width: 100%;
        height: 100%;
      }

      // 添加遮罩层
      .carousel-item-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px;
      }

      .carousel-item-info {
        flex: 1;
        z-index: 1;

        h3 {
          font-size: 24px;
          margin-bottom: 10px;
          font-weight: 600;
        }

        p {
          font-size: 16px;
          margin-bottom: 20px;
          opacity: 0.9;
        }

        .el-button {
          background-color: rgba(255, 255, 255, 0.2);
          border-color: rgba(255, 255, 255, 0.5);
          color: #fff;

          &:hover {
            background-color: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.7);
          }
        }
      }

      .carousel-item-icon {
        font-size: 80px;
        opacity: 0.8;
        z-index: 1;
      }
    }

    // Element UI 轮播图样式
    .el-carousel {
      .el-carousel__item {
        border-radius: 12px;
        overflow: hidden;
      }

      .el-carousel__indicators {
        .el-carousel__indicator {
          .el-carousel__button {
            background-color: rgba(255, 255, 255, 0.5);
          }

          &.is-active {
            .el-carousel__button {
              background-color: #fff;
            }
          }
        }
      }

      // 淡入淡出效果
      &.fade-carousel {
        .el-carousel__item {
          transition: opacity 1s ease-in-out;
        }
      }
    }

    // 自定义轮播图样式
    .custom-carousel-container {
      position: relative;
      height: 400px;
      overflow: hidden;
      border-radius: 12px;

      .custom-carousel {
        position: relative;
        height: 100%;
        overflow: hidden;

        .custom-carousel-track {
          display: flex;
          height: 100%;
          transition: transform 0.5s ease-in-out;
        }

        .custom-carousel-slide {
          min-width: 100%;
          height: 100%;
        }
      }

      .custom-carousel-controls {
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;

        .custom-carousel-prev,
        .custom-carousel-next {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.3);
          border: none;
          color: #fff;
          font-size: 18px;
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            background-color: rgba(255, 255, 255, 0.5);
          }

          &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }
        }

        .custom-carousel-dots {
          display: flex;
          gap: 8px;

          .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;

            &.active {
              background-color: #fff;
              transform: scale(1.2);
            }
          }
        }
      }
    }
  }

  .question-categories {
    margin-bottom: 40px;

    .section-title {
      font-size: 22px;
      font-weight: 600;
      color: #222222;
      margin-bottom: 20px;
      position: relative;
      padding-left: 12px;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 20px;
        background-color: var(--el-color-primary);
        border-radius: 2px;
      }
    }

    .category-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;

      .category-item {
        display: flex;
        align-items: center;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .category-icon {
          width: 50px;
          height: 50px;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 15px;

          i {
            font-size: 24px;
            color: #fff;
          }
        }

        .category-info {
          h3 {
            font-size: 16px;
            font-weight: 600;
            color: #222222;
            margin-bottom: 5px;
          }

          p {
            font-size: 14px;
            color: #666666;
          }
        }
      }
    }
  }

  .popular-questions {
    .section-title {
      font-size: 22px;
      font-weight: 600;
      color: #222222;
      margin-bottom: 20px;
      position: relative;
      padding-left: 12px;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 20px;
        background-color: var(--el-color-primary);
        border-radius: 2px;
      }
    }

    .question-title-cell {
      display: flex;
      align-items: center;

      span {
        margin-right: 10px;
      }
    }

    .el-table {
      .el-table__row {
        cursor: pointer;

        &:hover {
          background-color: #f5f7fa;
        }
      }
    }
  }
}

// 动画效果
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .question-page {
    padding: 70px 10px 10px 10px; // 调整小屏幕下的内边距

    .question-container {
      padding: 20px;

      .question-title {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .question-content {
        .carousel-type-selector {
          margin-bottom: 15px;

          .el-radio-group {
            .el-radio-button {
              .el-radio-button__inner {
                padding: 8px 12px;
                font-size: 12px;
              }
            }
          }
        }

        .el-carousel {
          .el-carousel__item {
            .carousel-item-content {
              padding: 20px;
              flex-direction: column;
              text-align: center;

              .carousel-item-overlay {
                padding: 20px;
                flex-direction: column;
                text-align: center;
              }

              .carousel-item-info {
                margin-bottom: 20px;

                h3 {
                  font-size: 20px;
                }

                p {
                  font-size: 14px;
                }
              }

              .carousel-item-icon {
                font-size: 60px;
              }
            }
          }
        }

        .custom-carousel-container {
          height: 300px;

          .carousel-item-content.custom {
            .carousel-item-overlay {
              padding: 20px;
              flex-direction: column;
              text-align: center;
            }

            .carousel-item-info {
              margin-bottom: 15px;

              h3 {
                font-size: 18px;
              }

              p {
                font-size: 14px;
              }
            }

            .carousel-item-icon {
              font-size: 50px;
            }
          }

          .custom-carousel-controls {
            bottom: 15px;
            padding: 0 15px;

            .custom-carousel-prev,
            .custom-carousel-next {
              width: 30px;
              height: 30px;
              font-size: 14px;
            }

            .custom-carousel-dots {
              .dot {
                width: 8px;
                height: 8px;
              }
            }
          }
        }
      }

      .question-categories {
        .category-grid {
          grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
          gap: 15px;

          .category-item {
            padding: 15px;

            .category-icon {
              width: 40px;
              height: 40px;

              i {
                font-size: 20px;
              }
            }

            .category-info {
              h3 {
                font-size: 14px;
              }

              p {
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .question-page {
    padding: 70px 5px 5px 5px; // 调整更小屏幕下的内边距

    .question-container {
      padding: 15px;
      border-radius: 8px;

      .question-title {
        font-size: 20px;
        margin-bottom: 15px;
      }

      .question-content {
        margin-bottom: 20px;

        .carousel-type-selector {
          margin-bottom: 10px;

          .el-radio-group {
            .el-radio-button {
              .el-radio-button__inner {
                padding: 6px 10px;
                font-size: 11px;
              }
            }
          }
        }

        .el-carousel {
          height: 250px !important;

          .el-carousel__item {
            .carousel-item-content {
              padding: 15px;

              .carousel-item-overlay {
                padding: 15px;
              }

              .carousel-item-info {
                h3 {
                  font-size: 16px;
                }

                p {
                  font-size: 12px;
                  margin-bottom: 15px;
                }
              }

              .carousel-item-icon {
                font-size: 40px;
              }
            }
          }
        }

        .custom-carousel-container {
          height: 250px;

          .carousel-item-content.custom {
            .carousel-item-overlay {
              padding: 15px;
            }

            .carousel-item-info {
              h3 {
                font-size: 16px;
              }

              p {
                font-size: 12px;
                margin-bottom: 10px;
              }
            }

            .carousel-item-icon {
              font-size: 40px;
            }
          }

          .custom-carousel-controls {
            bottom: 10px;
            padding: 0 10px;

            .custom-carousel-prev,
            .custom-carousel-next {
              width: 25px;
              height: 25px;
              font-size: 12px;
            }

            .custom-carousel-dots {
              .dot {
                width: 6px;
                height: 6px;
              }
            }
          }
        }
      }

      .question-categories {
        margin-bottom: 20px;

        .section-title {
          font-size: 18px;
          margin-bottom: 15px;
        }

        .category-grid {
          grid-template-columns: 1fr;
          gap: 10px;

          .category-item {
            padding: 12px;

            .category-icon {
              width: 35px;
              height: 35px;

              i {
                font-size: 18px;
              }
            }
          }
        }
      }

      .popular-questions {
        .section-title {
          font-size: 18px;
          margin-bottom: 15px;
        }
      }
    }
  }
}
</style>
